<template>
	<view class="content">
		<!-- 骨架屏 -->
		<view class="skeleton " v-if="story === null">
			<view class="skeleton-first "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>
			<view class="skeleton-second "></view>

			<view class="skeleton-second "></view>
			<view class="skeleton-first "></view>
		</view>
		<view v-else>


			<!-- 主要内容，富文本 -->
			<view class="text" v-html="story.body"></view>

			<view class="bottom">
				<uni-icons type="back" class="first" size="30" @click="goback"></uni-icons>
				<uni-badge class="uni-badge-left-margin" :text="comment.comments" absolute="rightTop" :offset="[-2, 6]"
					:inverted="true" size="small">
					<uni-icons type="chat" size="30" @click="gotoReview(dayid)"></uni-icons>
				</uni-badge>
				<uni-badge class="uni-badge-left-margin" :text="comment.popularity" absolute="rightTop" :inverted="true"
					:offset="[-2, 6]" size="small">
					<uni-icons type="hand-up" v-show="!islike" @click="Like" size="30"></uni-icons>
					<uni-icons type="hand-up-filled" v-show="islike" @click="Like" size="30"></uni-icons>
				</uni-badge>

				<uni-icons type="star" size="30" v-show="!iscollection" @click="collection"></uni-icons>
				<uni-icons type="star-filled" v-show="iscollection" color="gold" size="30" @click="collection">
				</uni-icons>
				<uni-icons type="upload" size="30"></uni-icons>
			</view>
			<uni-popup ref="popup" background-color="#fff" type="bottom">
				<view class="bottom-login-form">
					<view class="bottom-title">
						登录开启新世界哦
					</view>
					<view class="gologin" @click="goToLogin">
						前往登录/注册
					</view>
					<uni-data-checkbox />
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				story: null,
				iscollection: false,
				comment: {},
				dayid: '',
				islike: false,
				arr: [],
				show: false
			}
		},

		onLoad(res) {
			this.dayid = res.id;
			this.getTextData(res.id);
			this.getComments(res.id);
			this.getCollection();
			this.getLikeId()
		},
		// 实例销毁之前调用。在这一步，实例仍然完全可用。
		beforeDestroy() {
			let link = document.getElementById("link");
			if (!link) return;
			document.head.removeChild(link)
		},
		// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
		updated() {
			let imgPlace = document.querySelector(".img-place-holder");
			if (imgPlace) {
				if (imgPlace.innerHTML.trim() === '') {

					imgPlace.innerHTML += `<image src="${this.story.image}" alt=""/>`
				}
			}
		},
		methods: {
			change(e) {
				this.show = e.show
			},
			getCollection() {
				let collectionArr;
				try {
					const value = uni.getStorageSync('collection');
					if (value) {
						collectionArr = value
					}
				} catch (e) {
					// error
				}
				for (let key of collectionArr) {
					if (this.dayid === key["contentid"]) {
						
						this.iscollection = true;
						// console.log(123)

					}
				}
			},
			getLikeId() {
				let likeArr;
				try {
					const value = uni.getStorageSync('like');
					if (value) {
						likeArr = value
					}
				} catch (e) {
					// error
				}
				for (let key of likeArr) {
					if (this.dayid === key["likeid"]) {
						// this.comment.popularity = key.num
						this.islike = true;
						console.log(key.num)
				
					}
				}
			},
			goback() {
				// let canNavBack = getCurrentPages();
				// if (canNavBack && canNavBack.length > 1) {
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// } else {
				// 	history.back();
				// }
				uni.navigateTo({
					url: `../index/index`
				});
			},
			gotoReview(id) {
				uni.navigateTo({
					url: `../review/review?dayid=${id}`
				});
			},
			getTextData(res) {
				uni.request({
					url: `https://apis.netstart.cn/zhihudaily/story/${res}`,

					success: res => {
						this.story = res.data.story;
						let link = document.createElement('link');
						link.id = 'link';
						link.rel = 'stylesheet';
						link.href = this.story.css[0];
						document.head.appendChild(link)
					}
				})
			},
			getComments(id) {
				uni.request({
					url: `https://apis.netstart.cn/zhihudaily/story/${id}/extra`,

					success: res => {
						// console.log(res.data);
						this.comment = res.data;
					}
				})
			},
			collection() {
				let codekey = localStorage.getItem("codeyes");
				if (codekey) {


					if (this.iscollection) {
						this.iscollection = false;
						let collectionArr;
						try {
							const value = uni.getStorageSync('collection');
							if (value) {
								collectionArr = value
							}
						} catch (e) {
							// error
						}
						for (let key of collectionArr) {
							if (this.dayid === key["contentid"]) {
								collectionArr = collectionArr.filter(function(item) {
									return item != key
								})
								// console.log(collectionArr)

							}
						}
						try {
							uni.setStorageSync('collection', collectionArr);
						} catch (e) {
							// error
						}
					} else {
						this.iscollection = true;
						let arr;
						try {
							const value = uni.getStorageSync('collection');
							if (value) {
								arr = value
							}
						} catch (e) {
							// error
						}
						if (!arr) {
							arr = []
						} else {
							arr = arr
						}
						let time = new Date().toLocaleString('zh-CN', {
							hour12: false
						});
						arr.unshift({
							contentid: this.dayid,
							time: time
						});
						//删除arr中的重复对象
						var newArr = [];
						var arrId = [];
						for (var item of arr) {
							if (arrId.indexOf(item['contentid']) == -1) {
								arrId.push(item['contentid']);
								newArr.push(item);
							}
						}
						try {
							uni.setStorageSync('collection', newArr);
						} catch (e) {
							// error
						}
					}
				} else {
					this.$refs.popup.open('bottom');
				}
			},
			Like() {
				// this.islike = !this.islike
				let codekey = localStorage.getItem("codeyes");
				if (codekey) {
					if (this.islike) {
						this.comment.popularity -= 1;
						this.islike = false;
						let likeArr2;
						try {
							const value = uni.getStorageSync('like');
							if (value) {
								likeArr2 = value
							}
						} catch (e) {
							// error
						}
						for (let key of likeArr2) {
							if (this.dayid === key["likeid"]) {
								likeArr2 = likeArr2.filter(function(item) {
									return item != key
								})
								// console.log(likeArr2)
						
							}
						}
						try {
							uni.setStorageSync('like', likeArr2);
						} catch (e) {
							// error
						}
					} else {
						this.comment.popularity += 1;
						let arr;
						let localIdData = uni.getStorage({
							key: 'like',
							success: function(res) {
								// console.log(res.data)
								return arr = res.data
							}
						});
						if (!arr) {
							arr = []
						} else {
							arr = arr
						}
						arr.unshift({
							likeid:this.dayid,
							num:this.comment.popularity
						});
						//删除arr中的重复对象
						var newArr= [];
						var arrId = [];
						for(var item of arr){
						    if(arrId.indexOf(item['likeid']) == -1){
						        arrId.push(item['likeid']);
						        newArr.push(item);
						    }
						}
						uni.setStorage({
							key: "like",
							data: newArr,
							success: function() {
								// console.log("存储成功")
								
							}
						})
						this.islike = true;
					}
				} else {
					this.$refs.popup.open('bottom');
				}

			},
			goToLogin() {
				uni.navigateTo({
					url: `../login/login?id=${this.dayid}`
				});
			}
		}
	}
</script>

<style lang="less">
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		left: 0;
		display: flex;
		background-color: #f4f4f4;
		align-items: center;
		height: 80rpx;
		padding: 0 30rpx;
		justify-content: space-between;

		.first:nth-child(1) {
			position: relative;

			:after {
				position: absolute;
				right: -30rpx;
				top: -10%;
				content: "";
				width: 2rpx;
				height: 120%;
				background-color: #d5d5d5;
			}
		}
	}

	/deep/.uni-badge[data-v-7c66581c] {
		border: none;
		color: #000000;
	}

	.text {
		padding-bottom: 100rpx;
	}

	.content {
		margin: 0;

		/deep/.img-place-holder {
			overflow: hidden;
			height: 750rpx;

			img {
				display: block;
				margin: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	/deep/.avatar {
		margin: 0;
		display: none;
	}

	//骨架屏的样式
	.skeleton {
		// margin-top: 60rpx;
		padding: 10rpx 30rpx;

		.skeleton-first {
			width: 50%;
			height: 30rpx;
			background: rgb(242, 243, 245);
			margin-top: 45rpx;
		}

		.skeleton-second {
			width: 100%;
			height: 30rpx;
			background: rgb(242, 243, 245);
			margin-top: 45rpx;
		}
	}

	.bottom-title {
		font-size: 48rpx;
		text-align: center;
		color: #000;
		padding: 40rpx 0 20rpx 0;
	}

	.gologin {
		text-align: center;
		// padding-bottom: 40rpx;
		background-color: rgb(2, 170, 243);
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #000;
		margin: 0 auto;
		margin-bottom: 80rpx;
	}
</style>
